<template>
	<view>
		<!-- //上半部分 -->
		<view :class="index==1 ? 'top-kind white' : 'top-kind'" v-for="(item,index) in topList" :key="item.id" @click="goProduct(item.id)"> 
			<image :src="item.icon" mode=""></image>
			<view class="title">{{item.name}}</view>
		</view>
		
		<!-- 下半部分 -->
		<view class="bottom">
			<view class="bottom-kind" v-for="item in bottomList" :key="item.id" @click="goProduct(item.id)">
				<image :src="item.icon" mode=""></image>
				<view class="title">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { findCategory } from "@/api/kind/kind.js"
	export default {
		data() {
			return {
				kindList: [],
				topList:[],
				bottomList:[],
			};
		},
		methods:{
			// 初始化数据
			init(){
				findCategory('1308336521604599809').then(res=>{
					console.log(res);
					this.kindList = res.data.category.children;
					this.topList = this.kindList.slice(0,2);
					this.bottomList = this.kindList.slice(2,4);
				})
			},
			//跳转到商品列表
			goProduct(id){
				uni.navigateTo({
					url: `/pages/kind/product/product?kindId=${id}`,
				});
			}
		},
		onLoad() {
			this.init();
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1ece7;
	}
	.white {
		background-color: #fff!important;
	}
	//上半部分
	.top-kind {
		position: relative;
		width: 670rpx;
		height: 302rpx;
		background: #d5d5d5;
		box-shadow: 0 24rpx 40rpx 0 rgba(83,66,49,.05);
		border-radius: 40rpx;
		margin: 56rpx auto ;
		overflow: hidden;
		 image {
			 position: absolute;
			 width: 60%;
			 height: 100%;
			 top: 0;
			 right: 0;
		 }
		 .title {
			 position: absolute;
			 left: 52rpx;
			 top: 148rpx;
			 font-size: 48rpx;
			 color: #3e3e3e;
		 }
	}
	// 下半部分
	.bottom {
		width: 670rpx;
		display: flex;
		margin: 0 auto;
		margin-bottom: 48rpx;
		justify-content: space-between;
		 .bottom-kind {
			 position: relative;
			 width: 312rpx;
			 height: 442rpx;
			 background: #fafafa;
			 box-shadow: 0 24rpx 40rpx 0 rgba(83,66,49,.03);
			 border-radius: 40rpx;
			 border-radius: 40rpx;
			  image {
				  width: 100%;
				  height: 100%;
			  }
			  .title {
				  position: absolute;
				  left: 52rpx;
				  top: 148rpx;
				  font-size: 48rpx;
				  color: #3e3e3e;
			  }
		 }
	}
</style>
